<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/base.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <title>小米商城</title>
</head>
<body>
    <div class="content">
        <div class="header">
            <div class="logo">
                <img src="images/mi-logo.png" alt="logo" class="orange">
                <img src="images/slogan.png" alt="slogan">
            </div>
        </div>
        <div class="banner">
            <div class="log-reg">  
                <div class="login" id="tab">
                    <a href="#" class="current" >帐号登录</a> 
                    <span class="vr">|</span>
                    <a href="#">扫码登录</a> 
                </div>
                <div id="substance">
                    <div class="account">
                        <form>
                            <p class="user">
                            <input type="text" placeholder="邮箱/手机号/小米账号"/>
                            </p>
                            <p class="password">
                            <input type="password" placeholder="密码"/>
                            </p>
                            <p class="submit">
                            <input type="submit" value="登录"/>
                            </p>
                        </form>
                        <p class="register">
                            <span><a href="#">注册小米账号</a> </span>
                            <span>|</span>
                            <span><a href="#">忘记密码?</a> </span>
                        </p>
                        <div class="footer">
                            <p class="else">
                                <span class="left"></span>
                                其他方式登录
                                <span class="right"></span>
                            </p>
                            <div class="othercon">
                                <a href="#" ><span class="qq"></span></a>
                                <a href="#"><span  class="sina"></span></a>
                                <a href="#" ><span class="alipay"></span></a>
                                <a href="#" ><span class="wechat"></span></a>
                            </div>
                        </div>
                    </div>
                    <div class="scanning">
                        <img src="images/code.png" alt="QRcode">
                        <div class="explain">
                            <p>
                                <span>使用 </span>
                                <span class="current">小米商城APP </span>
                                <span>扫一扫</span>   
                            </p>
                            <p>小米手机可打开[设置]>[小米帐号]扫码登录</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
		<ul>
			<li class="li">
				<a href="#" style="color: black;">简体</a>
			</li>
			<li>|</li>
			<li>
				<a href="#">繁体</a>
			</li>
			<li>|</li>
			<li>
				<a href="#">英语</a>
			</li>
			<li>|</li>
			<li>
				<a href="#">常见问题</a>
			</li>
		</ul>
		<p>小米公司版权所有-京ICP备10046444- <img src="images/police.png">  京公网安备11010802020134号-京 ICP证110507号</p>
    </div>
    
    <script>
        var $lis = $("#tab>a");
     for(var i=0;i<$lis.length;i++){
         $lis[i].index=i;
     }
     $lis.click(function(){
         $(this).addClass("current").siblings().removeClass("current");
         $("#substance").children().hide().eq(this.index).show();
     });
   </script>
</body>
</html>